@import "common";
.main {height: 100%; box-sizing: border-box; background: #fff no-repeat top center / cover; position: relative;
  .index{height:100%; overflow: hidden; z-index:1;
    .btn-join {height:100%; width:100%; z-index:1; position:relative;}
    .explain{text-align: center;position:absolute; bottom:100/@rem; z-index:2; width:100%;
      a{font-size: 32/@rem; height:80/@rem; line-height:80/@rem; color: #fff; position: relative;display:block;
        //&.say{margin-right: 40/@rem;}
        i{display:inline-block;margin-left: 5/@rem;right: 0;top: 10/@rem;vertical-align: 1/@rem;width: 0;height: 0;border: 8/@rem solid transparent;border-left-color: #fff;}
      }
    }
    .foot { position: absolute; width: 100%; max-width: @sreen; text-align: center; color: rgba(255, 255, 255, 0.8); font-size: 24/@rem; bottom: 30/@rem;
      img { display: inline-block; height: 30/@rem; margin-left: 10/@rem; }
    }
  }
}

.box{
  position: absolute; top: 0;width: 100%;max-width: @sreen;background-color: rgba(0,0,0,0.8);bottom: 0; overflow:auto;
}
.box-sign {background: #fff top center / cover no-repeat; position: absolute; -webkit-overflow-scrolling: touch;  z-index:4;
  &.loading:before{content:""; width:100%; height:100%; background:rgba(0,0,0,0.5); position:fixed; z-index:11;}
  .title { width: 270/@rem; margin: 0 auto; padding-top: 60/@rem; }
  .close { position: absolute; right: 30/@rem; top: 30/@rem; width: 80/@rem; height: 80/@rem; border-radius: 100%; z-index: 10; display:none;}
  #form {display: block; padding: 0 55/@rem; margin-top: 50/@rem;
    .errorTip{
      background: #fd9e9e; margin-bottom: 10px; color: #fff; height:90/@rem; line-height:90/@rem; margin-bottom:30/@rem; padding:0 20/@rem; position:fixed; top:-90/@rem; width:100%; left:0; font-size:30/@rem; z-index:12; transition:all .5s;
    }
    .input {height: 90/@rem; border-radius: 3px; border: none; width: 100%; box-sizing: border-box; padding: 0 20/@rem; font-size: 30/@rem; line-height: 36/@rem; margin-bottom:30/@rem;
      &::placeholder { line-height: 38/@rem; color: #999; }
    }
    .textarea {font-family: inherit; margin-bottom:30/@rem;
      width: 100%; box-sizing: border-box; resize: none; padding: 20/@rem; font-size: 30/@rem; height: 200/@rem; border: none; border-radius: 0; display: block;
      &:first-child { border-bottom: 1px solid #ccc; }
      &::placeholder { line-height: 38/@rem; color: #999; }
    }
    .select{position: relative; height:90/@rem; margin-bottom:30/@rem; position:relative;
      &:before{content:""; position:absolute; width: 0; height: 0; border: 10.6/@rem solid transparent; border-top: 10.6/@rem solid #ccc; z-index:2; right:20/@rem; top:50%; margin-top:-5/@rem;}
      input{position: absolute; z-index:1;}
      select{position: absolute; width:100%; height:100%; z-index:2; top:0; height:90/@rem; opacity:0;}
    }

    .upload{margin-bottom:30/@rem; position:relative;
      .uploadbtn{display:block; width:100%; height:200/@rem; font-size: 28/@rem; line-height:280/@rem; color:#666; background-image: linear-gradient(-180deg, #FFFFFF 0%, #EBEBEB 100%); border: 0 solid #ccc;
        &:before{content:""; position:absolute; top:50/@rem; left:50%; height:50/@rem; width:1px; background:#999; text-align:center;}
        &:after{content:""; position:absolute; top:75/@rem; left:50%; margin-left:-25/@rem; width:50/@rem; height:1px; background:#999; text-align:center;}
      }

      .uploadFile{position:absolute; width:100%; height:100%; top:0; left:0; opacity:0; z-index: 2;}
      #view{position:absolute; width:100%; height:100%; top:0; left:0; z-index: 1; background-size:cover; background-position:50% 50%;}
      .clipArea{position: fixed; width:100%; height:100%; left:0; top:0; background:#000; z-index:10; display:none;
        .buttons{position:fixed; left:50%; transform:translate(-50%); top:80%; z-index:4; width:100%; text-align:center; position:relative;
          p{text-align: center; color: #fff; background: rgba(0,0,0,0.6); position: absolute; width: 100%; height: 100%; line-height: 90/@rem; font-size:28/@rem;}
          button{display: inline-block; width:200/@rem; height:90/@rem; font-size:26/@rem; border:none; margin:0 5/@rem; color:#fff; border-radius:20/@rem;}
          #clipBtn{background:#e35360;}
          #cancel{background:#666;}
        }
      }
    }

    .btn { background-image: linear-gradient(-180deg, #F6C84C 2%, #FFA42C 100%); border-radius: 3px; margin: 70/@rem 0; height: 90/@rem; font-size: 36/@rem; border: none; border-radius: 4px; display: block; width: 100%; color: #fff;
      &.loading{background:#999;}
    }
  }
}
.box-explain{display:none; z-index:4;
  .content{
    position: absolute;color: #000;left: 50/@rem;right: 50/@rem;padding: 30/@rem 40/@rem 50/@rem;box-sizing: border-box;top: 10%;border-radius: 6px; background: #fff;
    .tit{font-size: 36/@rem;font-weight: bold;text-align: center;}
    .cont{margin-top: 20/@rem;font-size: 28/@rem;text-align: justify;}
    .close{width: 80/@rem;height: 80/@rem;position: absolute;bottom: -120/@rem;left: 50%;margin-left: -40/@rem;border-radius: 100%;}
  }
}

.box-success{display:none; z-index:4;
  background-color: #fff;
  .icon{
    padding-top: 200/@rem;text-align: center;
    img{width: 160/@rem;}
  }
  .title{text-align: center;font-size: 48/@rem;margin-top: 20/@rem;}
  .cont{font-size: 28/@rem;color: #666;text-align: center;line-height: 50/@rem;margin-top: 30/@rem;}
  .link{
    margin-top: 80/@rem;font-size: 24/@rem;color: #666;text-align: center;
    span{color: #f30000;font-size: 36/@rem;}
    a{color: #4f77ad;}
  }
}

